<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="../../assets/tou_tiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon
        name="search"
        size="0.48rem"
        color="#fff"
        @click="$router.push({path: '/search'})"/>
      </template>
    </van-nav-bar>

    <van-tabs
      v-model="active"
      animated
      sticky
      offset-top="1.226667rem"
      @click="btn"
    >
      <van-tab
        v-for="obj in list"
        :title="obj.name"
        :key="obj.id"
        :name="obj.id"
      >
        <van-pull-refresh
          v-model="isLoading"
          @refresh="onRefresh"
          success-text="刷新成功"
        >
          <van-list
            v-if="articleList.length > 0"
            v-model="loading"
            offset="100"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ArticleList
            :arr="articleList"
             @action="actionFn"
             @detail="detailFn"></ArticleList>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <!-- 右侧的编辑频道的小图标 -->
    <van-icon
      name="plus"
      size="0.373334rem"
      class="moreChannels"
      @click="show = true"
    />
    <!-- 弹出层组件 -->
    <!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
    <van-popup v-model="show" :close-on-click-overlay="false" class="edit_wrap">
      <div class="popup-container">
        <!-- 弹出层的头部区域 -->
        <van-nav-bar title="频道管理">
          <template #right>
            <van-icon
              name="cross"
              size="0.373334rem"
              color="white"
              @click="closePop"
            />
          </template>
        </van-nav-bar>

        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit
          :unChannelList="unChannelList"
          :list="list"
          @del="delFn"
          @add="addFn"
          @changeChannel="changeChannelFn"
          ref="channel"
          ></ChannelEdit>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 封装的组件/vant组件 - 都是只负责展示你传入的数据，而交互的动作回到页面来完成 - 规范
import {
  channelListAPI,
  allChannelsAPI,
  undateChannelAPI,
  articlesListAPI,
  articlesDislikeAPI,
  articleReportsAPI
} from '@/api'
// 引入组件
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './components/ChannelEdit.vue'
import { formatTime } from '@/utils/date.js'
export default {
  data () {
    return {
      active: 0,
      list: [], // 频道导航列表
      allChannelList: [], // 所有频道的数据
      articleList: [], // 文章列表数据
      isLoading: false, // 下拉刷新的状态
      loading: false, // 上拉加载更多的状态
      finished: false, // 当没有数据是显示的提示
      page: 1, // 要的是第几页的数据
      channelId: 0, // 要请求的频道id  默认 0 是推荐频道
      show: false // 弹出层是否显示
    }
  },
  async created () {
    const [, res] = await channelListAPI()
    // console.log(res)
    this.list = res.data.data.channels
    const [, res1] = await allChannelsAPI()
    this.allChannelList = res1.data.data.channels
    // console.log(this.allChannelList)
    this.getArticleList() // 默认打开网页先请求一次列表数据
  },
  computed: {
    // 从所有的计算出用户未选的
    unChannelList () {
      // 拿出所有频道里的每个对象,去用户已选的频道里查找对应id的下标
      return this.allChannelList.filter((item) => {
        // 在filter里return 条件为true的才会被收集起来,循环结束后返回一个新数组
        const index = this.list.findIndex((obj) => {
          // return 条件为true 就会把找到的索引返回出去
          return Number(item.id) === Number(obj.id)
        })
        if (index === -1) {
          return true
        } else {
          return false
        }
      })
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    // 点击文章单元格跳转文章详情
    detailFn (item) {
      this.$router.push({
        path: `/art_detail?art_id=${item.art_id}`
      })
    },
    formatTime: formatTime,
    async getArticleList () {
      // 负责拿到文章列表数据
      const [, res] = await articlesListAPI({
        channel_id: this.channelId,
        page: this.page
      })
      // console.log(res.data.data.results)
      // 把回来的数据进行预处理,把时间转换成多久
      res.data.data.results.forEach((obj) => {
        obj.pubdate = this.formatTime(obj.pubdate)
      })
      // 如果没有数据
      if (res.data.data.results.length === 0) {
        // 告诉list组件直接底部显示没有更多数据
        this.finished = true
      } else {
        // console.log(res)
        this.articleList = [...this.articleList, ...res.data.data.results]
        // 等待网络请求到结果后, 把下拉刷新状态改为 false
        this.isLoading = false
        this.loading = false
      }
    },
    onRefresh () {
      // 文章下拉刷新数据
      // 下拉刷新时要给数组和页码重新改回空数组 和1
      this.articleList = []
      this.page = 1
      this.getArticleList()
    },
    onLoad () {
      // 文章上拉加载更多
      this.page++ // 页码+1
      this.getArticleList()
    },
    btn (channelId) {
      // 频道的点击事件
      this.channelId = channelId
      // 切换频道页码回到1, 数据重新获取
      this.page = 1
      this.articleList = []
      this.getArticleList()
    },
    acitonResult (err) {
      // 反馈处理结果
      if (err) {
        // 表示反馈失败
      } else {
        // 表示反馈成功
        this.page = 1
        this.articleList = []
        this.getArticleList()
        console.log('反馈成功')
      }
    },
    async actionFn (actionObj, artId) {
      // 反馈事件的方法
      // actionObj : {name : '不感兴趣'}
      // actionObj: {value: 0,name : '其他问题'}
      if (actionObj.name === '拉黑作者') {
        // 将来调用接口 判断
        return // 只要敢进来 就让下面代码不执行
      }

      if (actionObj.name === '不感兴趣') {
        const [, err] = await articlesDislikeAPI({
          target: artId
        })
        this.acitonResult(err) // 调用反馈结果处理函数
        return
      }

      // 只要不是拉黑作者和不感兴趣 全都是二级反馈面板对象
      const [err] = await articleReportsAPI({
        target: artId,
        type: actionObj.value
      })
      this.acitonResult(err) // 调用反馈结果处理函数
    },
    async delFn (obj, index) { // 编辑频道
      this.list.splice(index, 1)
      const resultList = this.list.filter((obj) => { return obj.id !== 0 }).map((item, index) => {
        const newObj = { ...item }
        newObj.seq = index + 1
        delete newObj.name // 删除对象里的name键值对
        return newObj
      })
      // console.log(resultList)
      await undateChannelAPI({
        channels: resultList
      })
    },
    async addFn (obj) { // 新增频道
      this.list.push(obj)
      const resultList = this.list.filter((obj) => { return obj.id !== 0 }).map((item, index) => {
        const newObj = { ...item }
        newObj.seq = index + 1
        delete newObj.name // 删除对象里的name键值对
        return newObj
      })
      console.log(resultList)
      await undateChannelAPI({
        channels: resultList
      })
    },
    async closePop () { // 关闭弹出层x事件
      this.show = false // 弹出层关闭
      this.$refs.channel.isEdit = false // 关闭子组件的编辑状态
    },
    changeChannelFn (channelId) { // 子组件切换频道的方法
      this.show = false
      this.active = channelId
      // 重新请求数据
      this.channelId = channelId
      this.page = 1
      this.articleList = []
      this.getArticleList()
    }
  }
}
</script>

<style scoped lang="less">
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
.logo {
  height: 80%;
}
/deep/ .van-tabs__content {
  padding-top: 44px;
}
</style>
